<!-- qc图片列表、下载、分享 -->
<template>
  <div style="width: 100%;">
    <div class="qc-flex" :class="types">
      <div class="flex-left">
        <div v-for="(item, index) in arr" :key="index" class="left-item" @click="viewPicture(index)">
          <img class="item-img" :src="item" alt="" />
        </div>
      </div>
      <div>
        <img class="share-down" src="@/assets/images/user/down-icon1.png" alt="" @click="downAll" />
        <Tooltip placement="top">
          <img class="flex-share" src="@/assets/images/public/share_abe1.png" alt="" />
          <div slot="content">
            <div class="share-content">
              <div v-for="(item, index) in shareList" :key="index" class="content-item" @click="shareItem(item)">
                <img class="item-icon" :src="item.icon" alt="" />
                <div class="item-text">{{ item.title }}</div>
              </div>
            </div>
          </div>
        </Tooltip>
      </div>
    </div>
  </div>
</template>

<script>
import { toSeoFriendsChannel } from '@/common/common';
import { clickStatistics } from "@/api/order";
export default {
  data() {
    return {
      clickCusPicForm: {
        clientType: 1 //请求类型：1-PC;2-H5
      },
      clickCusShareForm: {
        clientType: 1 //请求类型：1-PC;2-H5
      },
      current: 0,
      qcList: [],
      shareList: [
        {
          title: 'Discord',
          icon: require('@/assets/images/public/qc-discord.png'),
          type: 'discord'
        },
        {
          title: 'Telegram',
          icon: require('@/assets/images/public/qc-telegram.png'),
          type: 'telegram',
          url: 'https://web.telegram.org/k/'
        },
        {
          title: 'Reddit',
          icon: require('@/assets/images/public/qc-reddit.png'),
          type: 'reddit',
          url: 'https://www.reddit.com/r/100buy/submit/'
        },
        {
          title: 'Pinterest',
          icon: require('@/assets/images/public/qc-pinterest.png'),
          type: 'pinterest',
          url: 'https://ca.pinterest.com/pin-creation-tool/'
        },
        {
          title: 'Instagram',
          icon: require('@/assets/images/public/qc-instagram.png'),
          type: 'instagram',
          url: 'https://www.instagram.com/'
        },
        {
          title: 'WhatsApp',
          icon: require('@/assets/images/public/qc-whatsApp.png'),
          type: 'whatsApp',
          url: 'https://web.whatsapp.com/'
        },
        {
          title: 'Copy link',
          icon: require('@/assets/images/public/qc-copy.png'),
          type: 'copy'
        }
      ]
    }
  },
  props: {
    //qc-list订单列表 qc-detail-订单详情
    types: {
      type: String,
      default: 'qc-list'
    },
    //图片列表
    arr: {
      type: Array,
      default() {
        return []
      }
    },
    items: Object,
    inviteCode: String,//用户邀请码
  },
  watch: {
    items: {
      handler(n) {
        let list = [];
        if (n && n.photoServices && n.photoServices.length) {
          n.photoServices.forEach(item => {
            let url = '';
            let query = ''
            if (item.indexOf('libcdn1') != -1) {//替换前缀cdn
              url += item.replace('libcdn1.hahbuy.com', 'libcdn2.hahbuy.com/share')
            }
            if (item.indexOf('cbu01') != -1) {//替换前缀cdn
              url += item.replace('cbu01.alicdn.com', 'libcdn2.hahbuy.com/share')
            }
            //渠道码
            query += `${toSeoFriendsChannel(n.channel)}`;
            // spu
            query += `|${n.spuNo}`;
            //子单号
            query += `|${n.id}`;
            //重量
            query += `|${n.weight || ''}`;
            //推荐码
            query += `|${this.inviteCode || ''}`;
            //其他固定参数
            query += '|qcimage|share';
            url += `?query=${encodeURIComponent(query)}`;
            list.push(url);
          })
        }
        this.qcList = list;
      },
      immediate: true
    }
  },
  methods: {
    //下载
    downAll() {
      // 打点部分
      this.clickCusPicForm.orderItemId = this.items.id;//订单id
      this.clickCusPicForm.resourceType = 1;// 资源类型:1-图片;2-视频
      this.clickCusPicForm.sourceType = 1;// 来源：1-增值服务;2-普通QC
      this.clickCusPicForm.type = 2;// 类型：1-分享；2-下载
      clickStatistics(this.clickCusPicForm);
      // 逻辑部分
      this.qcList.forEach((item, index) => {
        setTimeout(() => {
          let name1 = item.split('?')[0];
          let name2 = name1.split('/');
          let name3 = name2[name2.length - 1];
          this.downImg(item, name3);
        }, (index + 1) * 800)
      })
    },
    downImg(modelUrl, imageName) {
      return new Promise(async (r) => {
        const response = await fetch(modelUrl);
        const blob = await response.blob();
        const link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        link.download = imageName; // 自定义下载的文件名
        link.click();
        r();
      })
    },
    // 查看图片
    viewPicture(index) {
      this.$viewerApi({
        images: this.qcList,
        options: {
          initialViewIndex: index,
        },
      });
    },
    //分享item
    shareItem(item) {
      // 打点部分
      this.clickCusShareForm.orderItemId = this.items.id;//订单id
      this.clickCusShareForm.resourceType = 1;// 资源类型:1-图片;2-视频
      this.clickCusShareForm.sourceType = 1;// 来源：1-增值服务;2-普通QC
      this.clickCusShareForm.type = 1;// 类型：1-分享；2-下载
      this.clickCusShareForm.shareChannel = item.type;//分享渠道
      clickStatistics(this.clickCusShareForm);
      // 下方是逻辑
      let _this = this;
      if (item.type == 'discord') {
        this.$emit('discordJump');
        return;
      }
      if (item.type == 'copy') {
        this.$copyText(this.qcList[0]).then(
          function () {
            _this.$Message.success(_this.$t("public.copySuccess"));
          },
          function () {
            _this.$Message.error(_this.$t("public.copyFail"));
          }
        );
        return;
      }
      if (item.url) {
        window.open(item.url);
        return;
      }
    }
  }
}
</script>

<style scoped lang="less">
.qc-list {
  .flex-left {
    .left-item {
      width: 48px;
      height: 48px;
      margin-right: 20px;
    }
  }
}

.qc-detail {
  .flex-left {
    .left-item {
      width: 80px;
      height: 80px;
      margin-right: 24px;
    }
  }
}

.qc-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .flex-left {
    flex: 1;
    margin-right: 24px;
    overflow-x: auto;
    white-space: nowrap;
    font-size: 0;

    .left-item {
      display: inline-block;
      font-size: 0;

      .item-img {
        width: 100%;
        height: 100%;
        border-radius: 4px;
      }
    }
  }

  .share-down {
    width: 28px;
    height: 28px;
    margin-right: 20px;
    cursor: pointer;
  }

  .flex-share {
    width: 24px;
    height: 24px;
  }

  .share-content {
    .content-item {
      display: flex;
      padding: 8px 0;
      align-items: center;
      cursor: pointer;
      font-size: 0;

      .item-icon {
        width: 14px;
        height: 14px;
        margin-right: 8px;
      }

      .item-text {
        color: #fff;
        font-size: 14px;
        line-height: 14px;
      }
    }
  }
}
</style>